<template>
    <el-menu default-active="0" mode="horizontal" class="headerBar">
        <el-button @click="routeBack">&lt;</el-button>

        <el-button @click="flash">
            <el-icon>
                <RefreshRight />
            </el-icon>
        </el-button>


        <form class="my-search" @submit.prevent="search" @keydown.enter.prevent="search">
            <el-input ref="searchInput" v-model="searchVal" placeholder="请输入关键字" clearable style="height: 100%;">
                <template #suffix>
                    <el-button native-type="submit" type="primary" text circle>
                        <el-icon size="15px">
                            <Search />
                        </el-icon>
                    </el-button>
                </template>
            </el-input>
        </form>


        <div style="flex-grow: 0.99;" />


        <el-tooltip effect="light" content="最小化" placement="bottom" :show-after="1000">
            <el-button text @click="minimize">
                <el-icon>
                    <Minus />
                </el-icon>
            </el-button>
        </el-tooltip>

        <el-tooltip effect="light" content="最大化" placement="bottom" :show-after="1000">
            <el-button text @click="maximize">
                <el-icon>
                    <FullScreen />
                </el-icon>
            </el-button>
        </el-tooltip>

        <el-tooltip effect="light" content="关闭" placement="bottom" :show-after="1000">
            <el-button text @click="closeApp">
                <el-icon>
                    <Close />
                </el-icon>
            </el-button>
        </el-tooltip>


    </el-menu>


</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useBaseStore } from '@/stores/baseStore';
import { ElMessage } from 'element-plus'

const router = useRouter();
const baseStore = useBaseStore();

const searchVal = ref('')

const minimize = () => {
    window.electronApi.winMinimize()
}

const maximize = () => {
    window.electronApi.winMaximize()
}

const closeApp = () => {
    window.electronApi.winClose()
}

const routeBack = () => {
    console.log(router);
    router.back();
}

const flash = () => {
    baseStore.increment();
}

const search = async () => {
    console.log(searchVal.value);
    if (searchVal.value === '') {
        ElMessage.info({
            showClose: true,
            message: "请输入关键字！！！",
            duration: 1000
        })
        return;
    }
    await router.push({
        path: '/search',
        query: { searchVal: searchVal.value }
    })
    baseStore.increment();

}

</script>

<style scoped>
.headerBar {
    -webkit-app-region: drag;
    padding-left: 5%;
    align-items: center;
    border-bottom: none !important;
    gap: 10px;
    height: 100%;
    padding-top: 15px;
    padding-bottom: 5px;
    box-shadow: var(--el-box-shadow-lighter);
    z-index: 1;
}

.headerBar * {
    -webkit-app-region: no-drag;
}

.headerBar-item {
    margin: 3px;
    border-radius: 10px;
    text-align: center;
    justify-content: center;
}

.headerBar-item:hover {
    background: inherit;
}

.my-search {
    width: 20%;
    height: 60%;
    transition: all 0.25s ease-in-out;
}

.my-search:focus-within {
    width: 30%;
    height: 70%;
}


.el-button+.el-button {
    margin-left: 0;
}
</style>